<template>
 <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
      <el-breadcrumb-item>部门列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-row type="flex" align="middle"  :class="['tagBottom', i1 === 0 ? 'tagTop' : '']" v-for="(item, i1) in deptList" :key="item.deptId" >
                    <el-col :span="2" style="text-align='center'">
                    </el-col>
                    <el-col :span="6" style="text-align='center'">
                      <el-row>
                        <el-tag v-if="actions.includes('4')" effect="dark" @click="handClick(item)" @close="handleClose(item.deptId,item.name)" type="danger" :disable-transitions="false" closable >{{ item.name }}</el-tag>
                         <el-tag v-if="!actions.includes('4')" effect="dark" @click="handClick(item)" type="danger" :disable-transitions="false" >{{ item.name }}</el-tag>
                        <i class="el-icon-caret-right"></i>
                      </el-row>
                      <el-row class="addDept">
                        <el-button v-if="actions.includes('2')" class="button-new-tag" size="small" @click="showInput(item.deptId, item.name)">+ 新增下级组织</el-button>
                      </el-row>
                    </el-col>
                    <el-col :span="16">
                        <el-row type="flex" align="middle" :class="[ i2 !== 0 ? 'tagTop' : '']" v-for="(item2, i2) in item.children" :key="item2.deptId">
                            <el-col :span="8">
                                 <el-row>
                                  <el-tag v-if="actions.includes('4')" effect="dark" @click="handClick(item2)" @close="handleClose(item2.deptId,item2.name)" type="success" :disable-transitions="false" closable >{{ item2.name }}</el-tag>
                                  <el-tag v-if="!actions.includes('4')" effect="dark" @click="handClick(item2)"  type="success" :disable-transitions="false" >{{ item2.name }}</el-tag>
                                <i class="el-icon-caret-right"></i>
                                 </el-row>
                                 <el-row class="addDept">
                                   <el-button v-if="actions.includes('2')" class="button-new-tag" size="small" @click="showInput(item2.deptId, item2.name)">+ 新增下级组织</el-button>
                                   </el-row>
                            </el-col>
                            <el-col :span="8">
                                 <el-row type="flex" align="middle" :class="[ i3 !== 0 ? 'tagTop' : '']" v-for="(item3, i3) in item2.children" :key="item3.deptId">
                            <el-col :span="8">
                                <el-tag v-if="actions.includes('4')" effect="dark" @click="handClick(item3)" @close="handleClose(item3.deptId,item3.name)" type="error" :disable-transitions="false" closable >{{ item3.name }}</el-tag>
                                <el-tag v-if="!actions.includes('4')" effect="dark" @click="handClick(item3)" type="error" :disable-transitions="false" >{{ item3.name }}</el-tag>
                                <!-- <el-tag v-if="!this.actions.includes('4')" effect="dark" @click="handClick(item3)" @close="handleClose(item3.deptId,item3.name)" type="error" :disable-transitions="false" closable >{{ item3.name }}</el-tag> -->
                            </el-col>
                            </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
    </el-card>
    <el-dialog title="添加组织" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="addForm" :rules="formRules" ref="addFormRef" label-width="120px" autocomplete="off">
        <el-form-item prop="name" label="上级组织名称">
          <el-input v-model="addForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item prop="newDeptName" label="新增组织名称">
          <el-input v-model="addForm.newDeptName"></el-input>
        </el-form-item>
        <el-form-item prop="orderNum"  label="排序">
          <el-input v-model="addForm.orderNum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDept()">添 加</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改组织" :visible.sync="dialogipdateFormVisible" width="30%">
      <el-form :model="updateForm" :rules="formRules" ref="updateFormRef" label-width="120px" autocomplete="off">
        <el-form-item prop="name" label="组织名称">
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="orderNum" label="排序">
          <el-input v-model="updateForm.orderNum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogipdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDept()">修 改</el-button>
      </div>
    </el-dialog>
 </div>
</template>
<script>
import { isNum } from '@/utils/validate'
export default {
  data () {
      var checkOrderNum = (rule,value,callback) => {
         if(!value){
         return callback(new Error('不能为空'));
       }
       if(value.length > 2){
         return callback(new Error('序号不能超过2位'));
       }
        if(!isNum(value)){
           return callback(new Error('序号只能是数字'));
        }
        callback();
      }
    return {
      // 该页面的操作权限
      actions: this.$store.getters.actions['/deptList'],
      deptList: [],
      dialogFormVisible: false,
      dialogipdateFormVisible: false,
      addForm: {},
      updateForm: {},
      formRules: {
        name: [{ required: true, trigger: 'blur', message: '组织名不能为空' }],
        newDeptName: [{ required: true, trigger: 'blur', message: '组织名不能为空' }],
        orderNum: [{ required: true, trigger: 'blur', validator: checkOrderNum }]
      }
    }
  },
  created () {
    this.getDeptList()
  },
  methods: {
    getDeptList () {
      this.$api.dept.getDeptList().then(res => {
        this.deptList = res.data
      })
    },
    showInput (id,name) {
      this.addForm = {}
      this.addForm.parentId = id
      this.addForm.name = name
      this.dialogFormVisible = !this.dialogFormVisible
      this.$refs.addFormRef.resetFields()
    },
    addDept () {
      this.$refs.addFormRef.validate(res => {
        if(res){
      this.$api.dept.addDept(this.addForm).then(res => {
        if(res.code === 200){
          this.$message.success('添加成功')
          this.dialogFormVisible = !this.dialogFormVisible
          this.getDeptList()
        }
      })
        }
      })
    },
    delDept (id) {
      this.$api.dept.delDept(id).then(res => {
        if(res.code === 200){
          this.$message.success('删除成功')
          this.getDeptList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    updateDept () {
      this.$refs.updateFormRef.validate(res => {
        if(res){
      this.$api.dept.updateDept(this.updateForm).then(res => {
        if(res.code === 200){
          this.$message.success('修改成功')
          this.dialogipdateFormVisible = !this.dialogipdateFormVisible
          this.getDeptList()
        } else {
          this.$message.error(res.message)
        }
      })
        }
        })
    },
    handleClose (id,name) {
      this.$confirm('此操作将永久删除组织 ' + name + ' , 是否继续?', '删除提示', {
        confirmButtonText: '删(ง •_•)ง',
        cancelButtonText: '点错了',
        type: 'warning'
      }).then(() => {
        this.delDept(id)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handClick (pept) {
      if(actions.includes('3') === true){
      // 解决地址引用的问题
       this.updateForm = JSON.parse(JSON.stringify(pept));
       this.dialogipdateFormVisible = !this.dialogipdateFormVisible
      }
    },
  }
}
</script>
<style lang="less" scoped>
.el-tag {
    margin: 7px;
}

.tagTop {
    border-top: 1px solid #eee;
}

.tagBottom {
    border-bottom: 1px solid #eee;
}

.addDept {
  padding-top: 20px;
}
</style>
